<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/default}">
<head>
    <title th:text="${item.title}">物品详情</title>
</head>
<body>
    <div layout:fragment="content" class="fade-in">
        <div class="mb-3">
            <a href="/items" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left"></i> 返回列表
            </a>
        </div>
        
        <div th:if="${successMessage}" class="alert alert-success alert-dismissible fade show" role="alert">
            <span th:text="${successMessage}"></span>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>

        <div th:if="${errorMessage}" class="alert alert-danger alert-dismissible fade show" role="alert">
            <span th:text="${errorMessage}"></span>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0" th:text="${item.title != null ? item.title : '无标题'}">物品标题</h5>
                <span th:if="${item.status.name() == 'LOST'}" class="badge bg-danger" th:text="${item.status.displayName}">失物</span>
                <span th:if="${item.status.name() == 'FOUND'}" class="badge bg-success" th:text="${item.status.displayName}">招领</span>
                <span th:if="${item.status.name() == 'COMPLETED'}" class="badge bg-info" th:text="${item.status.displayName}">已完成</span>
            </div>
            
            <div class="card-body">
                <div class="row">
                    <!-- 图片部分 -->
                    <div class="col-md-4 mb-4 mb-md-0">
                        <div class="text-center">
                            <img th:if="${item.imagePath != null}" th:src="${item.imagePath}" class="img-fluid rounded" alt="物品图片"
                                 style="max-height: 300px; width: auto;">
                            <img th:if="${item.imagePath == null}" src="/static/images/no-image.svg" class="img-fluid rounded" alt="无图片"
                                 style="max-height: 300px; width: auto;">
                        </div>
                    </div>
                    
                    <!-- 详细信息部分 -->
                    <div class="col-md-8">
                        <div class="p-2 rounded mb-3" style="background: rgba(52, 152, 219, 0.05);">
                            <h5 class="border-bottom pb-2 mb-3"><i class="fas fa-info-circle me-2"></i>详细信息</h5>
                            <table class="table table-borderless">
                                <tbody>
                                    <tr>
                                        <th style="width: 120px;"><i class="fas fa-tag me-2"></i>物品类型:</th>
                                        <td><span class="badge bg-secondary" th:text="${item.type != null ? item.type.displayName : '未知'}">类型</span></td>
                                    </tr>
                                    <tr>
                                        <th><i class="fas fa-info-circle me-2"></i>详细描述:</th>
                                        <td>
                                            <p class="text-pre-wrap" th:text="${item.description != null ? item.description : '无描述'}">描述内容</p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th><i class="fas fa-calendar-alt me-2"></i>丢失/拾获时间:</th>
                                        <td th:text="${item.lostTime != null && #temporals != null ? #temporals.format(item.lostTime, 'yyyy-MM-dd HH:mm') : '未知'}">丢失/拾获时间</td>
                                    </tr>
                                    <tr>
                                        <th><i class="fas fa-user me-2"></i>发布者:</th>
                                        <td th:text="${item.user.username}">用户名</td>
                                    </tr>
                                    <tr>
                                        <th><i class="fas fa-phone me-2"></i>联系方式:</th>
                                        <td th:text="${item.contactInfo}">联系方式</td>
                                    </tr>
                                    <tr>
                                        <th><i class="fas fa-clock me-2"></i>发布时间:</th>
                                        <td th:text="${#temporals.format(item.createdAt, 'yyyy-MM-dd HH:mm')}">发布时间</td>
                                    </tr>
                                    <!-- 认领信息 -->
                                    <tr th:if="${item.claimedBy != null}">
                                        <th><i class="fas fa-check-circle me-2"></i>认领信息:</th>
                                        <td>
                                            已被 <span th:text="${item.claimedBy.username}">认领者</span> 认领
                                            (<span th:text="${#temporals.format(item.claimedAt, 'yyyy-MM-dd HH:mm')}">认领时间</span>)
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        
                        <!-- 操作按钮 -->
                        <div class="d-flex gap-2">
                            <!-- 编辑按钮 - 仅对发布者显示 -->
                            <div th:if="${currentUser != null && currentUser.id == item.user.id}">
                                <a th:href="@{/items/{id}/edit(id=${item.id})}" class="btn btn-outline-primary">
                                    <i class="fas fa-edit me-2"></i>编辑
                                </a>
                                <form th:action="@{/items/{id}/delete(id=${item.id})}" method="post" class="d-inline ms-2"
                                      onsubmit="return confirm('确定要删除这条信息吗？');">
                                    <button type="submit" class="btn btn-outline-danger">
                                        <i class="fas fa-trash-alt me-2"></i>删除
                                    </button>
                                </form>
                                <!-- 查看认领列表按钮 - 仅对发布者显示 -->
                                <a th:href="@{/claims/item/{id}(id=${item.id})}" class="btn btn-outline-info ms-2">
                                    <i class="fas fa-list me-2"></i>查看申请列表
                                </a>
                            </div>
                            
                            <!-- 操作按钮 - 非发布者且物品未完成时显示 -->
                            <div th:if="${currentUser != null && currentUser.id != item.user.id && item.status.name() != 'COMPLETED'}">
                                <!-- 招领物品 - 显示认领按钮 -->
                                <a th:if="${item.status.name() == 'FOUND'}" 
                                   th:href="@{/claims/create/{id}(id=${item.id})}" 
                                   class="btn btn-success">
                                    <i class="fas fa-hand-holding-heart me-2"></i>认领物品
                                </a>
                                
                                <!-- 失物 - 显示找到物品按钮 -->
                                <a th:if="${item.status.name() == 'LOST'}" 
                                   th:href="@{/claims/create/{id}(id=${item.id})}" 
                                   class="btn btn-warning">
                                    <i class="fas fa-search-plus me-2"></i>我找到了
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 返回顶部按钮 -->
        <button id="back-to-top" class="btn btn-primary btn-sm back-to-top-btn" title="返回顶部">
            <i class="fas fa-arrow-up"></i>
        </button>
        
        <!-- 调试信息 -->
        <div class="card mt-3">
            <div class="card-header bg-info text-white">调试信息</div>
            <div class="card-body">
                <p><strong>图片路径:</strong> <span th:text="${item.imagePath}">图片路径</span></p>
                <p><strong>丢失时间 (原始值):</strong> <span th:text="${item.lostTime}">丢失时间</span></p>
                <p><strong>丢失时间 (类型):</strong> <span th:text="${item.lostTime != null ? item.lostTime.getClass().getName() : '空值'}">类型</span></p>
                <p><strong>temporals工具是否可用:</strong> <span th:text="${#temporals != null ? '可用' : '不可用'}">状态</span></p>
                <p><strong>尝试格式化:</strong> <span th:text="${item.lostTime != null ? (item.lostTime.toString()) : '无法格式化'}">结果</span></p>
                <p><strong>Item类型:</strong> <span th:text="${item.getClass().getName()}">类型</span></p>
                <p><strong>创建时间:</strong> <span th:text="${item.createdAt}">创建时间</span></p>
                <p><strong>更新时间:</strong> <span th:text="${item.updatedAt}">更新时间</span></p>
            </div>
        </div>
    </div>
    
    <style>
        .text-pre-wrap {
            white-space: pre-wrap;
        }
        
        .image-card {
            position: relative;
            overflow: hidden;
            border-radius: 10px;
            cursor: pointer;
        }
        
        .image-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s;
        }
        
        .image-overlay i {
            color: white;
            font-size: 2rem;
        }
        
        .image-card:hover .image-overlay {
            opacity: 1;
        }
        
        .back-to-top-btn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            display: none;
            z-index: 99;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        /* 复制成功提示 */
        .copy-tooltip {
            position: absolute;
            background-color: rgba(46, 204, 113, 0.9);
            color: white;
            padding: 5px 10px;
            border-radius: 3px;
            font-size: 12px;
            z-index: 1000;
            opacity: 0;
            transition: opacity 0.3s;
        }
        
        /* 打印样式 */
        @media print {
            .navbar, .footer, .btn, #back-to-top, .copy-btn {
                display: none !important;
            }
            
            body {
                background-color: white;
            }
            
            .card {
                box-shadow: none !important;
                border: 1px solid #ddd;
            }
            
            .card-header {
                background: #f8f9fa !important;
                color: black !important;
            }
        }
    </style>
    
    <script th:inline="javascript">
        document.addEventListener('DOMContentLoaded', function() {
            // 图片点击预览
            const detailImage = document.querySelector('.detail-image');
            if (detailImage && !detailImage.src.includes('no-image')) {
                detailImage.addEventListener('click', function() {
                    openImageModal(this.src);
                });
            }
            
            // 返回顶部按钮
            const backToTopBtn = document.getElementById('back-to-top');
            window.addEventListener('scroll', function() {
                if (window.pageYOffset > 300) {
                    backToTopBtn.style.display = 'flex';
                } else {
                    backToTopBtn.style.display = 'none';
                }
            });
            
            backToTopBtn.addEventListener('click', function() {
                window.scrollTo({top: 0, behavior: 'smooth'});
            });
            
            // 调试图片路径
            var imagePath = /*[[${item.imagePath}]]*/ '';
            console.log("图片路径:", imagePath);
        });
        
        function openImageModal(src) {
            // 创建模态框元素
            const modal = document.createElement('div');
            modal.className = 'image-preview-modal';
            modal.style.position = 'fixed';
            modal.style.top = '0';
            modal.style.left = '0';
            modal.style.width = '100%';
            modal.style.height = '100%';
            modal.style.backgroundColor = 'rgba(0,0,0,0.9)';
            modal.style.zIndex = '1050';
            modal.style.display = 'flex';
            modal.style.alignItems = 'center';
            modal.style.justifyContent = 'center';
            modal.style.opacity = '0';
            modal.style.transition = 'opacity 0.3s';
            
            // 创建图片元素
            const img = document.createElement('img');
            img.src = src;
            img.style.maxWidth = '90%';
            img.style.maxHeight = '90%';
            img.style.boxShadow = '0 0 20px rgba(0,0,0,0.5)';
            
            // 创建关闭按钮
            const closeBtn = document.createElement('button');
            closeBtn.style.position = 'absolute';
            closeBtn.style.top = '20px';
            closeBtn.style.right = '20px';
            closeBtn.style.backgroundColor = 'transparent';
            closeBtn.style.color = 'white';
            closeBtn.style.border = 'none';
            closeBtn.style.fontSize = '30px';
            closeBtn.style.cursor = 'pointer';
            closeBtn.innerHTML = '<i class="fas fa-times"></i>';
            closeBtn.onclick = function() {
                document.body.removeChild(modal);
            };
            
            // 组装模态框
            modal.appendChild(img);
            modal.appendChild(closeBtn);
            
            // 添加到页面
            document.body.appendChild(modal);
            
            // 动画效果
            setTimeout(() => {
                modal.style.opacity = '1';
            }, 10);
            
            // 点击模态框背景关闭
            modal.addEventListener('click', function(e) {
                if (e.target === modal) {
                    document.body.removeChild(modal);
                }
            });
        }
    </script>
</body>
</html> 